<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 栅格系统</title>

    <!-- Bootstrap -->
    <link href="./public/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="./public/js/html5shiv.min.js"></script>
    <script src="./public/js/respond.min.js"></script>
    <![endif]-->

    <style>
        .row div[class*='col-md']{
            border: 1px solid #ccc;
            background-color: #f5f5f5;
            height: 50px;
        }
    </style>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
        <div class="col-md-1">1</div>
    </div>
    <div class="row">
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
        <div class="col-md-2">2</div>
    </div>
    <div class="row">
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
        <div class="col-md-6">6</div>
        <div class="col-md-6">6</div>
    </div>
    <div class="row">
        <div class="col-md-8">8</div>
        <div class="col-md-4">4</div>
        <div class="col-md-4">4</div>
        <div class="col-md-8">8</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="row">
                <div class="col-md-3">3</div>
                <div class="col-md-9">9</div>
            </div>
        </div>
    </div>

    <!-- 
        根据设置视口的宽度不同 显示不同的页面样式
        大屏幕显示 1行3列;小屏幕 2行: 第1行 显示2列,第2行显示1列
     -->
    <div class="row">
        <div class="col-md-4 col-xs-6">大1-1/ 小1-1</div>
        <div class="col-md-4 col-xs-6">大1-2/ 小1-2</div>
        <div class="col-md-4 col-xs-12">大1-3/ 小2-1</div>
    </div>
</div>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="./public/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./public/js/bootstrap.min.js"></script>
</body>
</html>